<template>
  <div>
    <select v-model="num">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
      <option :value="4">4</option>
    </select>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="incrementAsync">异步增加</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import useCounterStore from '@/stores/counter'

// 创建store对象
const counterStore = useCounterStore()

const num = ref(3)

const increment = () => {
  counterStore.increment(num.value)
}
const decrement = () => {
  // 直接更新state数据
  counterStore.count -= num.value
  // 更新多个state数据
  // counterStore.$patch({
  //   count: counterStore.count-num.value,
  //   // xxx: ''
  // })
}
const incrementAsync = () => {
  counterStore.incrementAsync(num.value)
}

// export default {
//   name: 'CountUpdate',

//   data () {
//     return {
//       num: 3
//     }
//   },

//   methods: {
//     increment () {
//       // 触发increment的mutation
//       this.$store.commit('counter/increment', this.num)
//     },

//     decrement () {
//       // 触发decrement的mutation
//       this.$store.commit('counter/decrement', this.num)
//     },

//     incrementAsync () {
//       // 触发incrementAsync的action
//       this.$store.dispatch('counter/incrementAsync', this.num)
//     },
//   }
// }
</script>

<style scoped>

</style>
